<template>
  <div class="home-center">
    <!-- 个人信息 -->
    <div class="home-overview">
      <!-- 用户信息 -->
      <div class="user-meta">
        <div class="avatar">
          <img :src="$store.state.user.profile.avatar" />
        </div>
        <h4>{{ $store.state.user.profile.nickname || $store.state.user.profile.account }}</h4>
      </div>
      <div class="item">
        <a href="javascript:;">
          <span class="iconfont icon-hy"></span>
          <p>会员中心</p>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-aq"></span>
          <p>安全设置</p>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-dw"></span>
          <p>地址管理</p>
        </a>
      </div>
    </div>
    <!-- 收藏 -->
    <HomePanel title="我的收藏">
      <GoodsItem v-for="goods in myCollect" :key="goods.id" :good="goods" />
    </HomePanel>
    <!-- 足迹 -->
    <HomePanel title="我的足迹">
      <GoodsItem v-for="goods in myBrowseHistory" :key="goods.id" :good="goods" />
    </HomePanel>
    <!-- 猜你喜欢 -->
    <GoodsRelevant></GoodsRelevant>
  </div>
</template>

<script>
import GoodsRelevant from '@/views/goods/components/goods-relevant.vue'
import GoodsItem from '@/views/category/components/goods-item.vue'
import HomePanel from './components/home-panel.vue'
import { getMyBrowseHistory, getMyCollect } from '@/api/member'
import { ref } from 'vue'
export default {
  components: {
    GoodsRelevant,
    GoodsItem,
    HomePanel
  },
  setup() {
    // 我的足迹
    const myBrowseHistory = ref(null)
    getMyBrowseHistory({ page: 1, pageSize: 4 }).then(data => {
      myBrowseHistory.value = data.result.items
    })
    // 我的收藏
    const myCollect = ref(null)
     getMyCollect({ page: 1, pageSize: 4 }).then(data => {
      myCollect.value = data.result.items
    })
    return { myBrowseHistory, myCollect }
  }
}
</script>

<style lang="less" scoped>
:deep(.xtx-carousel .carousel-btn.prev) {
  left: 5px !important;
}

:deep(.xtx-carousel .carousel-btn.next) {
  right: 5px !important;
}

// 个人信息概览
.home-overview {
  height: 132px;
  background: url(../../../assets/images/center-bg.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
      }
    }
  }
}
</style>